<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分页组件</title>
</head>
<style>
    #pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

    #pagination button {
        margin: 0 10px;
        padding: 5px 10px;
    }

    #pageNumbers {
        display: flex;
    }

    .page-number {
        margin: 0 5px;
        padding: 5px 10px;
        cursor: pointer;
    }

    .active {
        background-color: #4CAF50;
        color: white;
    }
</style>
<body>
<div id="pagination">
    <button id="prevPage">上一页</button>
    <div id="pageNumbers"></div>
    <button id="nextPage">下一页</button>
</div>
</body>
<script>
    class Pagination {
        constructor(totalItems, itemsPerPage, onPageChange) {
            this.totalItems = totalItems; // 总数据量
            this.itemsPerPage = itemsPerPage; // 每页显示的数据量
            this.currentPage = 1; // 当前页码
            this.totalPages = Math.ceil(totalItems / itemsPerPage); // 总页数
            this.onPageChange = onPageChange; // 页面切换时的回调函数
            this.init();
        }

        init() {
            this.render();
            this.bindEvents();
        }

        render() {
            const pageNumbersContainer = document.getElementById('pageNumbers');
            pageNumbersContainer.innerHTML = '';

            for (let i = 1; i <= this.totalPages; i++) {
                const pageNumber = document.createElement('div');
                pageNumber.textContent = i;
                pageNumber.className = 'page-number';
                if (i === this.currentPage) {
                    pageNumber.classList.add('active');
                }
                pageNumbersContainer.appendChild(pageNumber);
            }

            const prevPageBtn = document.getElementById('prevPage');
            const nextPageBtn = document.getElementById('nextPage');

            if (this.currentPage === 1) {
                prevPageBtn.disabled = true;
            } else {
                prevPageBtn.disabled = false;
            }

            if (this.currentPage === this.totalPages) {
                nextPageBtn.disabled = true;
            } else {
                nextPageBtn.disabled = false;
            }
        }

        bindEvents() {
            const pageNumbersContainer = document.getElementById('pageNumbers');
            const prevPageBtn = document.getElementById('prevPage');
            const nextPageBtn = document.getElementById('nextPage');

            pageNumbersContainer.addEventListener('click', (e) => {
                if (e.target.classList.contains('page-number')) {
                    this.currentPage = parseInt(e.target.textContent);
                    this.render();
                    this.onPageChange(this.currentPage);
                }
            });

            prevPageBtn.addEventListener('click', () => {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.render();
                    this.onPageChange(this.currentPage);
                }
            });

            nextPageBtn.addEventListener('click', () => {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.render();
                    this.onPageChange(this.currentPage);
                }
            });
        }
    }

    // 使用示例
    const pagination = new Pagination(100, 10, (currentPage) => {
        console.log(`当前页码：${currentPage}`);
    });
</script>
</html>